<template>
	<div class="min-h-screen bg-gray-50 flex flex-col">
		<!-- 顶部导航 -->
		<nav class="h-24 bg-white shadow-sm fixed w-full z-50 flex items-center justify-between px-8">
			<div class="flex items-center gap-8">
				<!-- 系统Logo -->
				<div class="flex items-center gap-4 bg-slate-800 px-5 py-3 rounded-lg">
					<div class="logo-icon w-12 h-12">
						<svg viewBox="0 0 100 100" fill="none">
							<circle cx="50" cy="50" r="45" stroke="url(#gradient1)" stroke-width="3" fill="none" />
							<circle cx="50" cy="50" r="35" stroke="url(#gradient2)" stroke-width="2" fill="none" />
							<path d="M30 40 L50 30 L70 40 L70 60 L50 70 L30 60 Z" fill="url(#gradient3)"
								opacity="0.8" />
							<circle cx="50" cy="50" r="8" fill="white" />
							<defs>
								<linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="100%">
									<stop offset="0%" style="stop-color:#4A90E2" />
									<stop offset="100%" style="stop-color:#7BB3F0" />
								</linearGradient>
								<linearGradient id="gradient2" x1="0%" y1="0%" x2="100%" y2="100%">
									<stop offset="0%" style="stop-color:#5BA0F2" />
									<stop offset="100%" style="stop-color:#8CC8FF" />
								</linearGradient>
								<linearGradient id="gradient3" x1="0%" y1="0%" x2="100%" y2="100%">
									<stop offset="0%" style="stop-color:#4A90E2" />
									<stop offset="100%" style="stop-color:#6BB0FF" />
								</linearGradient>
							</defs>
						</svg>
					</div>
					<div class="flex flex-col">
						<span class="text-xl font-bold text-blue-600">
							EduLiveLink管理系统
						</span>
						<span class="text-xs text-black">
							智能教育平台
						</span>
					</div>
				</div>
			</div>
			<div class="flex items-center gap-4">
				<button
					class="bg-blue-600 text-white px-6 py-2 rounded-md font-medium hover:bg-blue-700 transition-colors"
					@click="goHome">返回首页</button>
			</div>
		</nav>

		<!-- 上方空白区域 -->
		<div class="h-24 bg-white"></div>

		<!-- 主要内容区域 -->
		<div class="flex flex-1">
			<!-- 侧边栏 -->
			<aside class="w-64 bg-white shadow-sm border-r border-gray-200 fixed h-[calc(100vh-6rem)] z-40">
				<div class="p-6">
					<h2 class="text-lg font-semibold text-gray-900 mb-6">控制台导航</h2>
					<ul class="space-y-1">
						<li>
							<router-link to="/console"
								class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-gray-50 transition-colors"
								:class="currentPath === '/console' ? 'bg-blue-50 text-blue-600' : 'text-gray-700'">
								<span class="w-5 h-5 flex items-center justify-center">
									<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
										stroke-width="2">
										<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
										<polyline points="9 22 9 12 15 12 15 22"></polyline>
									</svg>
								</span>
								<span>控制台首页</span>
							</router-link>
						</li>
						<li>
							<router-link to="/console/usermanagement"
								class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-gray-50 transition-colors"
								:class="currentPath.startsWith('/console/usermanagement') ? 'bg-blue-50 text-blue-600' : 'text-gray-700'">
								<span class="w-5 h-5 flex items-center justify-center">
									<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
										stroke-width="2">
										<path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
										<circle cx="8.5" cy="7" r="4"></circle>
										<line x1="20" y1="8" x2="20" y2="14"></line>
										<line x1="23" y1="11" x2="17" y2="11"></line>
									</svg>
								</span>
								<span>用户管理</span>
							</router-link>
						</li>
						<li>
							<router-link to="/console/classmanagement"
								class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-gray-50 transition-colors"
								:class="currentPath.startsWith('/console/classmanagement') ? 'bg-blue-50 text-blue-600' : 'text-gray-700'">
								<span class="w-5 h-5 flex items-center justify-center">
									<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
										stroke-width="2">
										<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
										<polyline points="9 22 9 12 15 12 15 22"></polyline>
									</svg>
								</span>
								<span>班级管理</span>
							</router-link>
						</li>
						<li>
						  <router-link to="/console/coursemanagement"
						    class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-gray-50 transition-colors"
						    :class="currentPath.startsWith('/console/coursemanagement') ? 'bg-blue-50 text-blue-600' : 'text-gray-700'">
						    <span class="w-5 h-5 flex items-center justify-center">
						      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
						        <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
						        <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
						      </svg>
						    </span>
						    <span>课程管理</span>
						  </router-link>
						</li>
						<li>
							<router-link to="/console/resources"
								class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-gray-50 transition-colors"
								:class="currentPath.startsWith('/console/resources') ? 'bg-blue-50 text-blue-600' : 'text-gray-700'">
								<span class="w-5 h-5 flex items-center justify-center">
									<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
										stroke-width="2">
										<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
										<polyline points="14 2 14 8 20 8"></polyline>
										<line x1="16" y1="13" x2="8" y2="13"></line>
										<line x1="16" y1="17" x2="8" y2="17"></line>
										<polyline points="10 9 9 9 8 9"></polyline>
									</svg>
								</span>
								<span>资源管理</span>
							</router-link>
						</li>
						<li>
							<router-link to="/console/settings"
								class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-gray-50 transition-colors"
								:class="currentPath.startsWith('/console/settings') ? 'bg-blue-50 text-blue-600' : 'text-gray-700'">
								<span class="w-5 h-5 flex items-center justify-center">
									<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
										stroke-width="2">
										<circle cx="12" cy="12" r="3"></circle>
										<path
											d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z">
										</path>
									</svg>
								</span>
								<span>系统设置</span>
							</router-link>
						</li>
					</ul>
				</div>
			</aside>

			<!-- 主内容区 - 整合控制台首页和Dashboard内容 -->
			<main class="flex-1 ml-64 p-8">
				<div class="mb-8">
					<h1 class="text-3xl font-bold text-gray-900 mb-2">
						{{ pageTitle }}
					</h1>
					<p class="text-gray-600">
						{{ pageDescription }}
					</p>
				</div>

				<!-- 控制台首页内容 -->
				<div class="space-y-6">
					<!-- 统计卡片区域 -->
					<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
						<div
							class="bg-white rounded-xl shadow-sm p-6 border border-gray-100 hover:shadow-md transition-shadow">
							<div class="flex justify-between items-start">
								<div>
									<p class="text-gray-500 text-sm mb-1">总用户数</p>
									<h3 class="text-3xl font-bold text-gray-900">{{ totalUsers }}</h3>
									<p class="text-green-500 text-sm mt-2">
										<span>↑ 12.5%</span>
										<span class="text-gray-400 ml-1">较上月</span>
									</p>
								</div>
								<div
									class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600">
									<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
										stroke-width="2">
										<path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
										<circle cx="8.5" cy="7" r="4"></circle>
										<line x1="20" y1="8" x2="20" y2="14"></line>
										<line x1="23" y1="11" x2="17" y2="11"></line>
									</svg>
								</div>
							</div>
						</div>

						<div
							class="bg-white rounded-xl shadow-sm p-6 border border-gray-100 hover:shadow-md transition-shadow">
							<div class="flex justify-between items-start">
								<div>
									<p class="text-gray-500 text-sm mb-1">总班级数</p>
									<h3 class="text-3xl font-bold text-gray-900">{{ totalClasses }}</h3>
									<p class="text-green-500 text-sm mt-2">
										<span>↑ 8.2%</span>
										<span class="text-gray-400 ml-1">较上月</span>
									</p>
								</div>
								<div
									class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center text-green-600">
									<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
										stroke-width="2">
										<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
										<polyline points="9 22 9 12 15 12 15 22"></polyline>
									</svg>
								</div>
							</div>
						</div>

						<div
							class="bg-white rounded-xl shadow-sm p-6 border border-gray-100 hover:shadow-md transition-shadow">
							<div class="flex justify-between items-start">
								<div>
									<p class="text-gray-500 text-sm mb-1">总资源数</p>
									<h3 class="text-3xl font-bold text-gray-900">{{ totalResources }}</h3>
									<p class="text-green-500 text-sm mt-2">
										<span>↑ 15.7%</span>
										<span class="text-gray-400 ml-1">较上月</span>
									</p>
								</div>
								<div
									class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-600">
									<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
										stroke-width="2">
										<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
										<polyline points="14 2 14 8 20 8"></polyline>
										<line x1="16" y1="13" x2="8" y2="13"></line>
										<line x1="16" y1="17" x2="8" y2="17"></line>
										<polyline points="10 9 9 9 8 9"></polyline>
									</svg>
								</div>
							</div>
						</div>

						<div
							class="bg-white rounded-xl shadow-sm p-6 border border-gray-100 hover:shadow-md transition-shadow">
							<div class="flex justify-between items-start">
								<div>
									<p class="text-gray-500 text-sm mb-1">活跃用户</p>
									<h3 class="text-3xl font-bold text-gray-900">{{ activeUsers }}</h3>
									<p class="text-green-500 text-sm mt-2">
										<span>↑ 5.3%</span>
										<span class="text-gray-400 ml-1">较上月</span>
									</p>
								</div>
								<div
									class="w-10 h-10 rounded-full bg-amber-100 flex items-center justify-center text-amber-600">
									<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
										stroke-width="2">
										<polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
									</svg>
								</div>
							</div>
						</div>
					</div>

					<!-- 图表区域 -->
					<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
						<div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100">
							<div class="flex justify-between items-center mb-6">
								<h3 class="font-semibold text-gray-900">用户活跃度趋势</h3>
								<div class="relative">
									<select v-model="dateRange"
										class="appearance-none bg-gray-50 border border-gray-200 text-gray-700 py-2 px-4 pr-8 rounded-lg leading-tight focus:outline-none focus:bg-white">
										<option value="7">近7天</option>
										<option value="30">近30天</option>
										<option value="90">近90天</option>
									</select>
									<div
										class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
										<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg"
											viewBox="0 0 20 20">
											<path
												d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
										</svg>
									</div>
								</div>
							</div>
							<div class="h-80">
								<canvas id="activityChart"></canvas>
							</div>
						</div>

						<div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100">
							<h3 class="font-semibold text-gray-900 mb-6">资源类型分布</h3>
							<div class="h-80 flex items-center justify-center">
								<canvas id="resourceTypeChart"></canvas>
							</div>
						</div>
					</div>

					<!-- 最近活动 -->
					<div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100">
						<div class="flex justify-between items-center mb-6">
							<h3 class="font-semibold text-gray-900">最近活动</h3>
							<router-link to="/console/activities" class="text-blue-600 text-sm hover:underline">
								查看全部
							</router-link>
						</div>
						<table class="min-w-full">
							<thead>
								<tr class="border-b border-gray-200">
									<th class="text-left py-3 px-4 text-sm font-medium text-gray-500">时间</th>
									<th class="text-left py-3 px-4 text-sm font-medium text-gray-500">用户</th>
									<th class="text-left py-3 px-4 text-sm font-medium text-gray-500">操作</th>
									<th class="text-left py-3 px-4 text-sm font-medium text-gray-500">状态</th>
								</tr>
							</thead>
							<tbody>
								<tr v-for="(activity, index) in recentActivities" :key="index"
									class="border-b border-gray-100 hover:bg-gray-50">
									<td class="py-3 px-4 text-sm text-gray-700">{{ activity.time }}</td>
									<td class="py-3 px-4 text-sm text-gray-700">{{ activity.user }}</td>
									<td class="py-3 px-4 text-sm text-gray-700">{{ activity.action }}</td>
									<td class="py-3 px-4">
										<span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800"
											v-if="activity.status === '成功'">
											成功
										</span>
										<span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800"
											v-else>
											{{ activity.status }}
										</span>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</main>
		</div>
	</div>
</template>

<script setup>
	import {
		ref,
		onMounted,
		reactive
	} from 'vue'
	import {
		useRoute,
		useRouter
	} from 'vue-router'
	import {
		Chart,
		registerables
	} from 'chart.js'

	// 注册Chart.js组件
	Chart.register(...registerables)

	// 路由相关
	const route = useRoute()
	const router = useRouter()
	const currentPath = ref('')

	// 页面标题和描述
	const pageTitle = ref('控制台首页')
	const pageDescription = ref('管理平台所有功能和数据')

	// 控制台首页数据
	const totalUsers = ref(1258)
	const totalClasses = ref(86)
	const totalResources = ref(3572)
	const activeUsers = ref(896)
	const dateRange = ref('30')

	// 最近活动数据
	const recentActivities = ref([{
			time: '2023-10-15 08:30',
			user: '张老师',
			action: '上传了新的教学视频',
			status: '成功'
		},
		{
			time: '2023-10-14 15:45',
			user: '李同学',
			action: '提交了数学作业',
			status: '成功'
		},
		{
			time: '2023-10-14 10:20',
			user: '王管理员',
			action: '创建了新班级',
			status: '成功'
		},
		{
			time: '2023-10-13 16:10',
			user: '赵同学',
			action: '下载了英语资料',
			status: '成功'
		},
		{
			time: '2023-10-13 09:15',
			user: '系统',
			action: '自动备份数据',
			status: '成功'
		}
	])

	// 返回首页
	const goHome = () => {
		router.push('/home')
	}

	// 更新页面标题和描述
	const updatePageInfo = (path) => {
		const pageInfoMap = {
			'/': {
				title: '控制台首页',
				description: '管理平台所有功能和数据'
			},
			'/console': {
				title: '控制台首页',
				description: '管理平台所有功能和数据'
			},
			'/console/usermanagement': {
				title: '用户管理',
				description: '管理平台所有用户信息和权限'
			},
			'/console/classmanagement': {
				title: '班级管理',
				description: '管理和查看所有班级信息'
			},
			'/console/resources': {
				title: '资源管理',
				description: '管理平台所有教学资源'
			},
			'/console/homeworkmanagement': {
				title: '作业管理',
				description: '管理所有班级的作业发布和提交情况'
			},
			'/console/settings': {
				title: '系统设置',
				description: '配置平台系统参数'
			}
		}

		// 查找匹配的页面信息
		const matchedPath = Object.keys(pageInfoMap).find(key => path.startsWith(key))

		if (matchedPath) {
			pageTitle.value = pageInfoMap[matchedPath].title
			pageDescription.value = pageInfoMap[matchedPath].description
		} else {
			pageTitle.value = '控制台'
			pageDescription.value = '管理平台所有功能和数据'
		}
	}

	// 初始化图表
	const initCharts = () => {
		// 用户活跃度趋势图
		const activityCtx = document.getElementById('activityChart')
		if (activityCtx) {
			new Chart(activityCtx, {
				type: 'line',
				data: {
					labels: ['1日', '5日', '10日', '15日', '20日', '25日', '30日'],
					datasets: [{
						label: '活跃用户',
						data: [650, 720, 680, 810, 760, 850, 896],
						borderColor: '#4A90E2',
						backgroundColor: 'rgba(74, 144, 226, 0.1)',
						tension: 0.4,
						fill: true
					}]
				},
				options: {
					responsive: true,
					maintainAspectRatio: false,
					plugins: {
						legend: {
							display: false
						}
					},
					scales: {
						y: {
							beginAtZero: true,
							grid: {
								color: 'rgba(0, 0, 0, 0.05)'
							}
						},
						x: {
							grid: {
								display: false
							}
						}
					}
				}
			})
		}

		// 资源类型分布图
		const resourceCtx = document.getElementById('resourceTypeChart')
		if (resourceCtx) {
			new Chart(resourceCtx, {
				type: 'doughnut',
				data: {
					labels: ['视频', '文档', '图片', '音频', '其他'],
					datasets: [{
						data: [45, 30, 15, 7, 3],
						backgroundColor: [
							'#4A90E2',
							'#5CB85C',
							'#F0AD4E',
							'#D9534F',
							'#7B68EE'
						],
						borderWidth: 0
					}]
				},
				options: {
					responsive: true,
					maintainAspectRatio: false,
					cutout: '70%'
				}
			})
		}
	}

	// 监听路由变化
	onMounted(() => {
		currentPath.value = route.path
		updatePageInfo(currentPath.value)

		// 初始化图表
		if (currentPath.value === '/console') {
			initCharts()
		}

		router.afterEach((to) => {
			currentPath.value = to.path
			updatePageInfo(currentPath.value)

			// 路由切换到首页时重新初始化图表
			if (to.path === '/console') {
				setTimeout(initCharts, 0)
			}
		})
	})
</script>

<style scoped>
	.logo-icon {
		filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
	}

	.logo-icon svg {
		width: 100%;
		height: 100%;
	}

	/* 表格样式优化 */
	table {
		width: 100%;
		border-collapse: collapse;
	}
</style>